import React, {Component} from 'react';
import axios from 'axios';
import {Button, Icon, Spin} from 'antd';

import Zmage from 'react-zmage'
import './bouns.css'

class Bouns extends Component {

  state = {
    page: 1,
    count: 10,
    list: []
  };

  componentDidMount() {
    const {page} = this.state;

    this.getData(page);

  }

  getData(page) {
    const {count} = this.state;

    axios.get('/api/data/%E7%A6%8F%E5%88%A9/' + count + '/' + page)
      .then(resp => {
        let results = resp.data.results;
        this.setState({
          page:page,
          list: results.map(item => {
            return {src: item.url, alt: item.url}
          })
        })
      })
  }

  render() {
    let imgdom = <div className="Container"><Spin/></div>;
    const {list} = this.state;


    if (list && list.length > 0) {
      //console.log(list, list[0].src);

      imgdom = <Zmage className="zimage" src={list[0].src} set={list}/>
    }
    return (
      <div>
        {imgdom}

        <Button.Group className="BottomGroup">
          <Button type="primary" onClick={e => this.onPrev(e)}>
            <Icon type="left"/>Go back
          </Button>
          <Button type="primary" onClick={e => this.onNext(e)}>
            Go forward<Icon type="right"/>
          </Button>
        </Button.Group>
      </div>
    )
  }

  onPrev(e) {
    const {page} = this.state;
    this.getData(page - 1 > 0 ? page - 1 : page);
  }

  onNext(e) {
    const {page} = this.state;
    this.getData(page + 1)
  }
}

export default Bouns;
